(function() {

    function Popup() {

        this.open = function(id, title, content, cmd) {
            if ($('#' + id).length !== 0) {
                $('#' + id).remove();
            }

            $('body:first').append('<div style="display:none" class="modal" id="' + id + '">\
                <div class="modal-dialog">\
                    <div class="modal-content">\
                        <div style="cursor: move" class="modal-header">\
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\
                            <h4 class="modal-title">' + title + '</h4>\
                        </div>\
                        <div class="modal-body">' + content + '</div>\
                        <div class="modal-footer"></div>\
                    </div>\
                </div>\
            </div>');
            $('#' + id + ' .close').click(function() {
                popup.close(id);
            });
            if (cmd) {
                for (var i = 0; i < cmd.length; i++) {
                    $('#' + id + ' .modal-footer').append('<button type="button" class="btn ' + cmd[i].style + '" id="' + 'popup-cmd-' + id + '-' + i + '">' + cmd[i].title + '</button>');
                    $('#' + 'popup-cmd-' + id + '-' + i).click(cmd[i].fn);
                }
            }

            $('#' + id).draggable({
                handle: $('#' + id + ' .modal-header')
            });
            shadow.show();

            $(window).resize(function() {
                popup.resetPos();
            });
            $('#' + id).show('fade');
            popup.resetPos();
            
            $('body').keydown(function(e){
                if(e.keyCode == 27){
                    popup.close(id);
                }
            });
        };

        this.close = function(id) {
            $('#' + id).hide('fade');
            shadow.hide();
            $('#' + id).remove();
        };

        this.resetPos = function() {
            $('.modal').each(function() {
                $(this).find('.modal-body').css('max-height', $(window).height() - 200);
                $(this).find('.modal-body').css('max-width', $(window).width() - 200);
                $(this).css('margin-top', -($(this).height()) / 2);
                $(this).css('margin-left', -($(this).width()) / 2);

            });
        };

        this.msg = function(msg, fn) {
            this.open('popup-msg', 'Thông báo', '<div class="container" style="min-width: 300px">' + msg + '</div>', [{
                    title: "Đồng ý",
                    style: "btn-primary",
                    fn: function() {
                        popup.close('popup-msg');
                        if (fn) {
                            fn();
                        }
                    }
                }]);
        };

        this.confirm = function(msg, fn) {
            this.open('popup-confirm', 'Xác nhận', '<div class="container" style="min-width: 300px">' + msg + '</div>', [{
                    title: "Đồng ý",
                    style: "btn-primary",
                    fn: function() {
                        fn();
                        popup.close('popup-confirm');
                    }
                }, {
                    title: 'Từ chối',
                    fn: function() {
                        popup.close('popup-confirm');
                    }
                }]);
        };
    }

    function Loading() {
        this.show = function() {
            if ($('#loading').length === 0) {
                var html = '<div id="loading" class="modal" style="width: 230px; display: none; margin-left:-115px; z-index:1100">';
                html += '<div class="modal-body">';
                html += '<div class="loading">';
                html += '<div class="loading-img"></div><p>Vui lòng chờ trong giây lát!</p></div>';
                html += '</div>';
                html += '</div>';
                $('body:first').append(html);
            }
            popup.resetPos();
            $('#loading').show('fade');
            shadow.show();
        };
        this.hide = function() {
            $('#loading').hide('fade');
            shadow.hide();
        };
    }

    function Shadow() {
        this.count = 0;

        this.show = function() {
            if ($('#shadow').length === 0)
                $('body:first').append('<div id="shadow" class="modal-backdrop"></div>');
            this.count++;
            if (this.count > 0) {
                $('#shadow').show();
            }
        };
        this.hide = function() {
            this.count--;
            if (this.count < 0) {
                this.count = 0;
            }
            if (this.count === 0) {
                $('#shadow').hide();
            }
        };
    }

    this.loading = new Loading();
    this.popup = new Popup();
    this.shadow = new Shadow();

})();